<template>
    <div class="scorerankding">
        <sticky>
            <tab>
                <tab-item @on-item-click="tabclick" :selected="selectdindex === index" :key="index"
                          v-for="(item,index) in tabs">{{item.name}}
                </tab-item>
            </tab>
            <header v-if="tabs[selectdindex].lists.length>0" class="headerselect">
                <span :class="[dataselectindex===datalength?'gry':'']" @click="rightbtn"><icon
                        name="left"></icon>上一期</span>
                <div class="middleselect" @click="showPopupPicker = true">
                    {{tabs[selectdindex].issue | getarrfirts}}
                </div>
                <span :class="[dataselectindex<=0?'gry':'']" @click="leftbtn"
                >下一期<icon
                        name="right"></icon></span>
            </header>
        </sticky>
        <section class="listtabscon">
            <div class="item-div" v-for="(itemlists, index) in tabs" v-show="selectdindex===index" :key="index">
                <ul v-if="itemlists.lists.length>0" class="listcon">
                    <li v-for="(item,tabindex) in itemlists.lists" @click="getjumpurl(item.issueNo)">
                        <span class="timedata"><strong>{{item.no}}  {{item.league}}  {{item.begin}}</strong></span>
                        <section>
                            <i class="icond" @click.stop="machFollow(item,index,tabindex)">
                                <icon :class="['iconx',item.follow?'ed':'']"
                                      :name="item.follow?'collected':'collect'"></icon>
                            </i>
                            <div class="middle">
                                        <span class="leftname">
                                            {{item.homeName}}
                                        </span>
                                <strong>
                                    <em :class="item.score!=='VS'?'red':''">{{item.score}}</em>
                                    <b>{{[item.state,item.step,item.halfScore] | getmatchstatus}}</b>
                                </strong>
                                <span class="rightname">
                                            {{item.visitingName}}
                                        </span>
                            </div>
                            <icon class="iconx" name="right"></icon>
                        </section>
                        <aside @click.stop="jumpmaches(item.issueNo)">{{item.planCounts}}个推荐</aside>
                    </li>
                </ul>
                <Nodata v-else spanvalue="暂无赛事" title="点击赛事星星可以关注" type="1"/>
            </div>
        </section>
        <popup-picker :show.sync="showPopupPicker" @on-change="onChange" :show-cell="false"
                      title="TEST"
                      :data="tabs[selectdindex].issues"></popup-picker>
    </div>
</template>

<script>
    import {getImmediatelyScoresR, getOverScoresR, getMyScoreR, scoreFollw, getanalyseR} from '../../service/matchs';
    import {isEmpty, head, indexOf} from 'ramda';
    import {isphone} from '../../uitls/common';
    import {getMytoken, getLogintoken} from '../../service/common';
    import {Tab, TabItem, Sticky, Swiper, SwiperItem, PopupPicker} from 'vux';
    import Nodata from '../../components/Nodata.vue';
    export default {
        components: {
            Nodata,
            Tab, TabItem, Sticky, Swiper, SwiperItem, PopupPicker
        },
        data() {
            return {
                tabs: [{
                    name: '即时比分',
                    lists: [],
                    issues: [['加载中']],
                    issue: '',
                }, {
                    name: '完场比分',
                    lists: [],
                    issues: [['加载中']],
                    issue: '',
                }, {
                    name: '我的关注',
                    lists: [],
                    issues: [['加载中']],
                    issue: '',
                }],
                selectdindex: 0,
                containscores: [[], [], []],
                showPopupPicker: false,
                rightnone: '',
                letfnone: ''
            };
        },
        created() {
            this.getDate(0);
        },
        filters: {
            //TODO 多个参数
            getmatchstatus: function ([state, step,halfscore]) {
                switch (state) {
                    case 0:
                        return '未开始';
                        break;
                    case 1:
                        return '进行中' + step;
                        break;
                    case 2:
                        return `已结束(半场:${halfscore})`;
                        break;
                }
            },
            getarrfirts: function (value) {
                if(isEmpty(value)) {
                    return '0';
                }
                return (value);
            }
        },
        computed: {
            dataselectindex: function () {
                const {selectdindex, tabs}=this;
                const issues = tabs[selectdindex].issues[0];
                const issue = tabs[selectdindex].issue;
                return indexOf(issue, issues);
            },
            datalength: function () {
                const {selectdindex, tabs}=this;
                const issues = tabs[selectdindex].issues[0];
                return issues.length - 1;
            }
        },
        methods: {
            tabclick(index){
                this.selectdindex = index;
                this.getDate(index);
            },
            jumpmaches(id) {
                this.$router.push(`/matchs/matchlists/${id}`)
            },
            async onChange(val){
                const {selectdindex}=this;
                this.getDate(selectdindex, val);
            },
            async getjumpurl(issueNo){
                const {data}=await getanalyseR(issueNo);
                if(data && data.code === 0) {
                    location.href = data.data.originAnalyseDetailHref;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async rightbtn(){
                const {selectdindex, tabs, datalength, dataselectindex}=this;
                if(datalength === dataselectindex) {
                    return;
                }
                const issues = tabs[selectdindex].issues[0];
                const issue = tabs[selectdindex].issue;
                let index = indexOf(issue, issues) + 1;
                this.getDate(selectdindex, issues[index]);
            },
            async leftbtn(){
                const {selectdindex, tabs, dataselectindex}=this;
                if(dataselectindex <= 0) {
                    return;
                }
                const issues = tabs[selectdindex].issues[0];
                const issue = tabs[selectdindex].issue;
                const index = indexOf(issue, issues) - 1;

                this.getDate(selectdindex, issues[index]);
            },
            async machFollow(obj, tabindex, index){
                const {token, deviceCode}=await getMytoken(true);
                const {issueNo, follow}=obj;
                const {data}=await scoreFollw({token, issueNo, 'isfollow': follow, deviceCode});
                if(data && data.code === 0) {
                    this.tabs[tabindex].lists[index].follow = !follow;
                    this.$vux.toast.text(follow ? '取关成功' : '关注成功');
                }
                else {
                    this.$vux.toast.text(data.msg);
                }

            },
            async getDate(type, issue){
                const fnlist = [getImmediatelyScoresR, getOverScoresR, getMyScoreR];
                const {token, deviceCode}=await getMytoken(true);
                const issuesend = issue || this.tabs[type].issue;
                const {data}=await fnlist[type]({token, issue: issuesend, deviceCode});
                if(data && data.code === 0) {
                    this.tabs[type].lists = data.data.scores;
                    this.tabs[type].issues = [];
                    this.tabs[type].issues.push(data.data.issues);
                    if(this.tabs[type].issue)
                        this.tabs[type].issue = data.data.issue;
                    if(isEmpty(this.tabs[type].issue)) {
                        this.tabs[type].issue = data.data.issue;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../app";

    .scorerankding {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .vux-slider {
            height: 100%;
            .vux-swiper {
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
            }
        }
        .vux-slider > .vux-swiper > .vux-swiper-item {
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
        }

        .listtabscon {
            flex: 1;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            .item-div {
                flex: 1;
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
                height: 100%;
            }
        }

        .headerselect {
            height: 88px;
            box-sizing: border-box;
            border-bottom: 1px solid #d9d9d9;
            padding: 0 30px;
            background: #fff;
            display: flex;
            align-items: center;
            .middleselect {
                flex: 1;
                display: flex;
                justify-content: center;
            }
            .gry {
                color: @color4;
            }
        }

        .listcon {
            overflow: scroll;
            display: flex;
            flex-direction: column;
            flex: 1;
            -webkit-overflow-scrolling: touch;
            li {
                height: 300px;
                background: #fff;
                border-bottom: 1px solid @color12;
                padding: 0 50px 0 24px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                .timedata {
                    font-size: @fz26;
                    color: @color3;
                }
                section {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 30px 0;
                    .icond {
                        width: 40px;
                    }
                    .iconx {
                        width: 33px;
                        height: 33px;
                        color: @color3;
                        &.ed {
                            color: @color22;
                        }
                    }
                    .middle {
                        font-size: @fz32;
                        display: flex;
                        align-items: center;
                        flex: 1;
                        justify-content: center;
                        span {
                            font-weight: bolder;
                            text-align: center;
                            width: 220px;
                            &.leftname {
                                text-align: right;
                            }
                            &.rightname {
                                text-align: left;
                            }
                        }
                        strong {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            margin: 0 20px;
                            em {
                                font-size: @fz40;
                                color: @color3;
                                line-height: 1;
                                &.red {
                                    color: @color22;
                                }
                            }
                            b {
                                font-size: @fz40;
                                color: @color3;
                                transform: scale(0.5);
                                line-height: 1;
                                width: 200%;
                                text-align: center;
                            }
                        }
                    }
                }
                aside {
                    .setnormalcss(56px);
                    box-sizing: border-box;
                    border: 1px solid @colororange;
                    width: 190px;
                    display: block;
                    margin: 0 auto;
                    border-radius: 56px;
                    color: @colororange;
                    font-size: @fz28;
                }
            }
        }
    }


</style>